<template>
    <div class="demo-container">
      <!-- 自定义组件引用 -->
      <h3>生成二维码</h3>
      <vue-qr
        :bgSrc="bgSrc"
        :logoSrc="logoSrc"
        :text="text"
        :size="size"
        :margin="margin"
        :callback="callback"></vue-qr>
    </div>
</template>

<script>
import VueQr from 'vue-qr'
const bgSrc = require('../../../../assets/images/default/bg1.png').default
const logoSrc = require('../../../../assets/images/default/icon_ren.png').default
console.log('logoSrc:', logoSrc)

export default {
  name: "QRDemo",
  components: {
    VueQr
  },
  data() {
    return {
      bgSrc, // 欲嵌入的背景图地址
      logoSrc, // 嵌入至二维码中心的 LOGO 地址
      text: 'Hello world!', // 欲编码的内容
      size: 200, // 尺寸, 长宽一致, 包含外边距
      margin: 20 // 二维码图像的外边距, 默认 20px
    }
  },
  created() {
    setTimeout(() => {
      this.text = 'QR Test'
    }, 3000)
  },
  methods: {
    callback (dataUrl, id) {
      // 返回一个base64的地址
      console.log(dataUrl, id)
    }
  }
};
</script>
